﻿$(document).ready(function () {
    var rating_text = ['', 'Bad', 'Just so so', 'Good', 'Very Good', 'Excellent'];

    $(".my-rating").starRating({
        initialRating: 4,
        strokeColor: '#894A00',
        strokeWidth: 10,
        starSize: 25,
        useFullStars: true,
        disableAfterRate: false,
        callback: function (currentRating, $el) {
            $(".my-rating").attr('data-value', currentRating);
        },
        onHover: function (currentIndex, currentRating, $el) {
            $(".my-rating").next().html(rating_text[currentIndex]);
        },
        onLeave: function (currentIndex, currentRating, $el) {
            $(".my-rating").next().html(rating_text[parseInt(currentRating)]);
        }
    });    

    $(document).on('click', '[data-type=submit_comment]', function () {
        var $obj = $(this);
        var $parent = $(this).parents(".leave-comment:first");
        var txtcomment = $parent.find("textarea:first").val();

        if (txtcomment.length == 0) {
            layer.msg('Please input comment content !');
            return;
        }
        var ratingValue = 0;
        var $rating = $parent.find(".my-rating:first");
        if ($rating.length > 0) {
            ratingValue = $rating.attr('data-value');
        }

        layer.load(2);
        $.post(window.singleConfig.rootUrl + "api/users/RecipeService/comment", {
            primary_id: $obj.attr('data-primary_id'),
            rating_value: ratingValue,
            comment_content: txtcomment,
            comment_parent_id: $obj.attr('data-parentid'),
            comment_type: comment_type,
        }, function (data) {
            if (data.code == "success") {
                layer.closeAll();
                layer.msg('Rating successful !');
                $parent.find("textarea:first").val('');

                if (parseInt(data.comment.h) == 0) {
                    var commentDom =
'<div class="uk-container comment-head-img uk-margin-bottom">\
    <div class="first-comment uk-panel uk-margin-bottom">\
        <div class="uk-panel-badge uk-badge uk-badge-danger" style="cursor:pointer;" data-type="reply">REPLY</div>\
        <img src="{0}" alt="" class="uk-border-circle uk-margin-right">\
        <span class="uk-margin-right">{1}</span>\
        <span class="uk-text-muted">{2}</span>\
        <div class="my-rating-readonly" data-value="{4}" style="display:inline-block;"></div>\
        <p>{3}</p>\
    </div>\
    <div class="sub-comment" style="display:none;" data-type="leave_comment">\
        <div class="uk-container comment-head-img  leave-comment" style="padding-left:0px;">\
            <div class="uk-form" style="margin-top:10px;">\
                <textarea rows="5" class="uk-width-1-1" placeholder="any question you want to ask?"></textarea>\
                <div style="text-align:right;">\
                    <button type="button" class="uk-button uk-button-primary uk-margin-top" data-type="submit_comment" data-parentid="{5}" data-primary_id="{6}">Submit</button>\
                </div>\
            </div>\
        </div>\
    </div>\
</div>';
                    var c = data.comment;
                    commentDom = stringFormat(commentDom, c.a, c.b, c.c, c.d, c.e, c.f, c.g);
                    $("#divCommentContainer").prepend(commentDom).find(".my-rating-readonly").each(function () {
                        var $obj = $(this);
                        $obj.starRating({
                            initialRating: parseInt($obj.attr('data-value')),
                            strokeColor: '#894A00',
                            strokeWidth: 10,
                            starSize: 25,
                            useFullStars: true,
                            readOnly: true,
                        });
                    });
                }
                else {
                    var commentDom = 
                    '<div class="sub-comment">\
                        <img src="{0}" alt="" class="uk-border-circle uk-margin-right">\
                        <span class="uk-margin-right">{1}</span>\
                        <span class="uk-text-muted">{2}</span>\
                        <p>{3}</p>\
                    </div>';
                    var c = data.comment;
                    commentDom = stringFormat(commentDom, c.a, c.b, c.c, c.d);                    
                    $obj.parents('.sub-comment:first').before(commentDom);
                }
            }
            else {
                layer.closeAll();
                layer.msg(data.message);
            }
        }, "json");
    });

    $(".my-rating-readonly").each(function () {
        var $obj = $(this);
        $obj.starRating({
            initialRating: parseInt($obj.attr('data-value')),
            strokeColor: '#894A00',
            strokeWidth: 10,
            starSize: 25,
            useFullStars: true,
            readOnly: true,
        });
    });

    $(document).on('click', '[data-type=reply]', function () {
        $(this).parents(".uk-container:first").find("[data-type=leave_comment]").toggle();
    });
});